<template>
  <el-tag
    v-bind="$attrs"
    :type="type"
    :closable="closable"
    :disable-transitions="disableTransitions"
    :hit="hit"
    :color="color"
    :size="size"
    :effect="effect"
    :round="round"
    @close="handleClose"
    @click="handleClick"
  >
    <slot />
  </el-tag>
</template>

<script>
export default {
  name: 'MyElTag',
  inheritAttrs: false,
  props: {
    type: {
      type: String,
      default: '',
      validator: (value) => {
        return ['', 'success', 'info', 'warning', 'danger'].includes(value)
      }
    },
    closable: {
      type: Boolean,
      default: false
    },
    disableTransitions: {
      type: Boolean,
      default: false
    },
    hit: {
      type: Boolean,
      default: false
    },
    color: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: 'default',
      validator: (value) => {
        return ['large', 'default', 'small'].includes(value)
      }
    },
    effect: {
      type: String,
      default: 'light',
      validator: (value) => {
        return ['dark', 'light', 'plain'].includes(value)
      }
    },
    round: {
      type: Boolean,
      default: false
    }
  },
  emits: ['close', 'click'],
  methods: {
    handleClose(event) {
      this.$emit('close', event)
    },
    handleClick(event) {
      this.$emit('click', event)
    }
  }
}
</script> 